<template>
	<view class="order-item" @click="goDetail">
		<view class="order-item-header">
			<view class="order-item-type" v-if="item.productType===3">	
				<image class="image" src="/static/tickets-icon.png" />	
				门票
			</view>	
			<view class="order-item-type" v-if="item.productType===1">	
				<image class="image" src="/static/tourline-icon.png" />	
				线路
			</view>
			<view class="order-item-status">
				{{ORDER_STATUS_NAME[item.orderStatus]}}
			</view>			
		</view>
		<view class="order-item-content">
			<view class="title-wrap">
				<view class="">
					{{item.dtaName}}										
				</view>
				<basic-price :price="item.actualAmount" unitSize="32rpx" size="32rpx" />
				<!-- <view class="">
					{{item.actualAmount}}					
				</view>			 -->
			</view>	
			<view class="detail">
				<basic-label-value label="预订日期" :value="item.createdAt" />	
				<basic-label-value label="出行日期" :value="item.checkinTime" />
				<basic-label-value label="套餐类型" :value="item.packageName" />
				<!-- 套餐内产品 -->
				<basic-label-value :label="item.skuNameStr" notColon />							
			</view>	
			<view class="bottom-wrap">
				<!-- 接口返回的按钮状态设置有问题，产品决定先隐藏，下个版本修复好订单状态再处回显 -->
				<orderBtnBar
					:item="item"
					@click="handleClick"
					@payTimeout="$emit('payTimeout')" />
			</view>	
		</view>
		
		<!-- 退款状态 -->
		<view v-if="showRefundTag" class="refund-tag">
			{{REFUND_STATUS_NAME[item.refundStatus]}}
		</view>
	</view>
</template>
<script>
import { ORDER_STATUS_NAME, REFUND_STATUS, REFUND_STATUS_NAME } from '@/model/enum'
import orderBtnBar from './order-btn-bar'
import pay from '@/mixins/pay'
import sdk from 'sdk'

export default {
	name: '',
	mixins: [pay],

	components: { orderBtnBar },
	
	props: {
		item: { type: Object, default:{} }
	},
	data(){
		return {
			ORDER_STATUS_NAME,
			REFUND_STATUS_NAME
		}
	},
	computed: {
		showRefundTag() {
			return this.item.refundStatus && (this.item.refundStatus > REFUND_STATUS.INIT)
		}
	},

	methods: {
		handleClick(event) {
			this.$emit('click', event)
		},

		goDetail(){
			sdk.navigateTo({
				// url: `/ubd/trade/detail?orderNo=${this.item.orderNo}`
				url: `/packageOrder/pages/detail/index?orderNo=${this.item.orderNo}`
			})
		}
	}
}
</script>
<style lang="less">
.order-item{
	position: relative;
	width: 100%;
	margin-bottom: @page_horizonal_margin;
	background: #fff;
	display: flex;
	flex-direction: column;
	border-radius: 16rpx;
	.order-item-header{
		width: 100%;
		height: 90rpx;
	    background: #FBFCFE;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		.order-item-type{
			.flex-normal-center;
			font-size: 28rpx;
			color: #1B2431;
			.image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.order-item-status{
			.flex-normal-center;
			color: #8D98AF;
			font-size: 24rpx;
		}
	}
	.order-item-content{
		flex: 1;
		padding: 34rpx 34rpx 0;
		.title-wrap{
			display: flex;
			justify-content: space-between;
			color: #1B2431;
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.bottom-wrap{
			padding-top: 20rpx;		
		}
	}

	.refund-tag {
		position: absolute;
		right: 0;
		top: 186rpx;

		line-height: 36rpx;
		padding: 0 32rpx 0 20rpx;

		border-top-left-radius: 18rpx;
		border-bottom-left-radius: 18rpx;

		color: @font_tag_color;
		background-color: fade(@font_tag_color, 10%);
	}
}
</style>